<template>
  <div class="userManagePage">
    <!--搜索表单-->
    <a-form layout="inline" :model="searchParams" @finish="doSearch">
      <a-form-item label="编程语言类型" name="reviewStatus">
        <a-select
          v-model:value="searchParams.language"
          :options="QUESTION_SUBMIT_LANGUAGE_OPTIONS"
          placeholder="请输入编程语言类型"
          style="min-width: 180px"
          allow-clear
        />
      </a-form-item>
      <a-form-item label="问题ID">
        <a-input v-model:value="searchParams.questionId" placeholder="输入问题ID" allow-clear/>
      </a-form-item>
      <a-form-item label="题目状态">
        <a-input v-model:value="searchParams.status" placeholder="题目状态" allow-clear/>
      </a-form-item>

      <a-form-item>
        <a-button type="primary" html-type="submit">搜索</a-button>
      </a-form-item>


    </a-form>


    <div style="margin-bottom: 20px"></div>



    <!--    表单-->
    <a-table
      :columns="columns"
      :data-source="dataList"
      :pagination="pagination"
      @change="doTableChange"
    >
      <template #bodyCell="{ column, record }">


        <template v-if="column.dataIndex === 'userId'">

        </template>

        <template v-else-if="column.slotName === 'judgeInfo'">
          {{ JSON.stringify(record.judgeInfo) }}
        </template>
        <template v-else-if="column.slotName === 'createTime'">
          {{ dayjs(record.createTime).format("YYYY-MM-DD HH:mm:ss")}}
        </template>

        <template v-if="column.slotName === 'optional'">
          <div class="action-cell">
            <a-button
              type="primary"
              @click="toQuestionPage(record)"
              class="action-btn"
              size="large"
            >
                  <span class="btn-content">
                    跳转到详细题目
                  </span>
            </a-button>
          </div>
        </template>

        <!-- 判题状态 -->
        <template v-if="column.dataIndex === 'status'">
          <a-tag :color="getStatusColor(record.status)" class="status-tag">
            <component :is="getStatusIcon(record.status)" />
            {{ getStatusText(record.status) }}
          </a-tag>
        </template>
      </template>

    </a-table>
  </div>
</template>
<script lang="ts" setup>
import { computed, onMounted, reactive, ref } from 'vue'
import {
  deleteUserUsingPost,
  getLoginUserUsingGet, getUserVoByIdUsingGet,
  listUserVoByPageUsingPost
} from '@/api/userController.ts'
import { message } from 'ant-design-vue'
import dayjs from 'dayjs'
import { listQuestionSubmitByPageUsingPost } from '@/api/questionController.ts'
import {
  QUESTION_SUBMIT_LANGUAGE_MAP,
  QUESTION_SUBMIT_LANGUAGE_OPTIONS
} from '@/constant/question.ts'
import {
  CheckCircleOutlined,
  ClockCircleOutlined,
  CloseCircleOutlined,
  SyncOutlined
} from '@ant-design/icons-vue'
import router from '@/router'
import Question = API.Question
import QuestionVO = API.QuestionVO
import QuestionSubmitVO = API.QuestionSubmitVO
const columns = [
  {
    title: "提交号",
    dataIndex: "id",
  },
  {
    title: "编程语言",
    dataIndex: "language",
  },
  {
    title: "判题信息",
    slotName: "judgeInfo",
  },
  {
    title: "判题状态",
    dataIndex: "status",
  },
  {
    title: "题目 id",
    dataIndex: "questionId",
  },
  {
    title: "提交者 id",
    dataIndex: "userId",
  },
  {
    title: "创建时间",
    slotName: "createTime",

  },
  {
    title: "操作",
    slotName: "optional",

  },
];


// 数据
const dataList = ref([])
const total = ref(0)

// 搜索条件
const searchParams = reactive<API.QuestionSubmitQueryRequest>({
  current: 1,
  pageSize: 10,
  sortField: 'createTime',
  sortOrder: 'ascend',
  language: undefined,
})

// 获取数据
const fetchData = async () => {

  const res = await listQuestionSubmitByPageUsingPost({
    ...searchParams
  })
  if (res.data.data) {
    dataList.value = res.data.data.records ?? []
    total.value = res.data.data.total ?? 0
  } else {
    message.error('获取数据失败，' + res.data.message)
  }
}

// 页面加载时请求一次
onMounted(() => {
  fetchData()
})


// 分页参数
const pagination = computed(() => {
  return {
    current: searchParams.current ?? 1,
    pageSize: searchParams.pageSize ?? 10,
    total: total.value,
    showSizeChanger: true,
    showTotal: (total) => `共 ${total} 条`,
  }
})
// 表格变化处理
const doTableChange = (page: any) => {
  searchParams.current = page.current
  searchParams.pageSize = page.pageSize
  fetchData()
}

// 获取数据
const doSearch = () => {
  // 重置页码
  searchParams.current = 1
  fetchData()
}

// 删除数据
const doDelete = async (id: string) => {

  if (!id) {
    return
  }
  //询问是否删除
  const confirm = window.confirm('确定删除吗？')
  if (!confirm) {
    return
  }
  if (!id) {
    return
  }
  const res = await deleteUserUsingPost({ id })
  if (res.data.code === 0) {
    message.success('删除成功')
    // 刷新数据
    fetchData()
  } else {
    message.error('删除失败')
  }
}
// 获取状态颜色
const getStatusColor = (status: number) => {
  const colorMap = {
    0: 'default',
    1: 'processing',
    2: 'success',
    3: 'error'
  }
  return colorMap[status] || 'default'
}
// 获取状态图标
const getStatusIcon = (status: number) => {
  const iconMap = {
    0: ClockCircleOutlined,
    1: SyncOutlined,
    2: CheckCircleOutlined,
    3: CloseCircleOutlined
  }
  return iconMap[status] || ClockCircleOutlined
}
// 获取状态文本
const getStatusText = (status: number) => {
  const statusMap = {
    0: '待判题',
    1: '判题中',
    2: '通过',
    3: '失败'
  }
  return statusMap[status] || '未知'
}

const toQuestionPage = (questionSubmitVO: QuestionSubmitVO) => {
  router.push({
    path: `/view/question/${questionSubmitVO.questionId}`,
  })
}
</script>

<style>
.status-tag {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
  min-width: 80px;
  justify-content: center;
}
</style>
